<template>
  <view class="container">
    <u-empty text="没有数据" v-if="!hasData"></u-empty>
    <u--form labelPosition="left" :model="detail" ref="form" v-if="hasData">
      <uni-section class="form-section" title="订单明细" type="line">
        <u-form-item class="form-item" label="出发地" labelWidth="80" prop="startAddress" borderBottom ref="start-address">
          <u-input type="text" maxlength="10" v-model="detail.startAddress" clearable focus border="none"
            readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="目的地地" labelWidth="80" prop="endAddress" borderBottom ref="end-address">
          <u-input type="text" maxlength="10" v-model="detail.endAddress" clearable focus border="none"
            readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="出发时间" labelWidth="80" prop="startTime" borderBottom ref="start-time">
          <u-input type="text" maxlength="20" v-model="detail.startTime" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="乘车人数" labelWidth="80" prop="personNum" borderBottom ref="person-num">
          <u-input type="text" maxlength="20" v-model="detail.personNum" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="携带物品" labelWidth="80" prop="appendices" borderBottom ref="appendices">
          <u-input type="text" maxlength="20" v-model="detail.appendices" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="预估费用" labelWidth="80" prop="price" borderBottom ref="price">
          <u-input type="text" maxlength="20" v-model="detail.price" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item class="form-item" label="订单状态" labelWidth="80" prop="orderStatus" borderBottom ref="orderStatus">
          <u-input type="text" maxlength="20" v-model="orderStatus" border="none" readonly></u-input>
        </u-form-item>
      </uni-section>
    </u--form>

    <view style="margin: 5%;" v-if="hasData">
      <u-row justify="space-between" style="margin-top: 5%;">
        <u-button v-if="btnShow" text="立即接单" type="primary" @click="receive"></u-button>
        <u-button v-if="!btnShow" :text="btnText" :disabled="true" type="error"></u-button>
      </u-row>
    </view>
    <u-modal ref="receiveModal" text="接单成功，请立即联系乘客" :show="showReceiveModal" :showConfirmButton="false">
      <view style="width: 60%;padding: 0%;height: 80%;">
        <u--text type="info" text="请点击拨打乘客联系电话"></u--text>
        <u--text mode="phone" size="20" iconStyle="font-size: 18px;color:#fa3534" prefixIcon="phone-fill"
          text="15019479320" format="encrypt" :call="true" color="#3C9CFF"></u--text>
      </view>
    </u-modal>
    <u-notify ref="uNotify"></u-notify>
  </view>
</template>

<script>
  import {
    queryOrder,
    receiveOrder
  } from '../../api/pinche';
  import config from '@/common/config';
  export default {
    data() {
      return {
        orderId: '',
        btnText: '订单已接单',
        detail: {},
        btnShow: true,
        showReceiveModal: false,
        hasData: true
      }
    },
    onLoad(e) {
      if (!e.id) {
        this.hasData = false;
      } else {
        this.hasData = true;
        this.orderId = e.id;
        this.queryOrderDetail(e.id);
      }
    },
    onReady() {},
    onShow() {
      if (this.detail.status == 1) {
        this.btnShow = false;
        this.showReceiveModal = false;
      }
    },
    //去掉顶部左侧返回按钮
    mounted() {
      var a = document.getElementsByClassName('uni-page-head-hd')[0]
      a.style.display = 'none';
    },
    computed: {
      orderStatus: {
        get() {
          if (this.detail.status == 1) {
            return "已接单";
          } else {
            return "待接单"
          }
        },
        set() {}
      }
    },
    methods: {
      queryOrderDetail(id) {
        queryOrder({
          id: id
        }).then(res => {
          this.detail = res.data;
          this.detail.personNum = this.detail.personNum + '人';
          this.detail.price = 80;
          if (this.detail.status == 1) {
            this.btnShow = false;
          }
        })
      },
      receive() {
        receiveOrder({
          id: this.orderId
        }).then(res => {
          this.queryOrderDetail(this.orderId);
          if (res.data) {
            this.showReceiveModal = true;
          } else {
            this.openNotify('订单已被抢走，下次快点哦', 'error');
            this.btnText='订单已被抢走，下次快点哦';
            this.btnShow = false;
          }
        })
      },
      openNotify(message, type) {
        this.$refs.uNotify.show({
          message: message,
          type: type,
          fontSize: 15,
          duration: 3000,
          safeAreaInsetTop: true
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form-section {
    padding-left: 17rpx;

    .form-item {
      padding-left: 17rpx;
    }
  }

  .u-popup-slot {
    width: 200px;
    height: 150px;
    @include flex;
    justify-content: center;
    align-items: center;
  }
</style>
